<template>
<div class="earth-wrap">
  <div class="wrapper">
	<div class="moon">
		<div class="x one"></div>
		<div class="x two"></div>
		<div class="x three"></div>
	</div>
	<div class="moon-line"></div>	
	<!-- <div class="clouds">
		<div class="cloud one"></div>
		<div class="cloud two"></div>
		<div class="cloud three"></div>
	</div> -->
	<div class="earth">
		<div class="country">
			<div class="us-north"></div>
			<div class="us-north-1"></div>
			<div class="us-south"></div>
			<div class="africa"></div>
			<div class="europe"></div>
		</div>
	</div>
</div>
</div>
</template>

<style lang="scss" scoped>
.earth-wrap {
	margin: 0;
  padding: 0;
  background: linear-gradient(to left top, #e68f50, #563232, #0f0e37, #0a1922, #052a00);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
	flex-direction:column;
}


.wrapper {
	position: relative;
  height: 80%;
  min-height: 250px;
  border-radius: 10px;
  overflow: hidden;
	display:flex;
	justify-content:center;
	align-items:center;
	height: 500px;
	width: 500px;
	// background: rgba(177, 174, 176, 0.10980392156862745);
}

.moon-line {
	position:absolute;
 	background-color:transparent;
	border:4px dashed rgba(89, 90, 98, 0.14);
	height:380px;
	border-radius:50%;
	width:380px;
	z-index:1
}

.clouds {
	position:absolute;
	
	.cloud {
		position: relative;		
		background-color: rgba(255, 255, 255, 0.64);
		border-radius: 200px;
		z-index:3;
		
		&.one{
			width: 90px;
			height: 30px;
			top: -48px;
			right: -58px;
		}
		
		&.two{
			width: 60px;
			height: 25px;
			top:62px;
		}
		
		&.three{
			width: 100px;
			height: 35px;
			top: -38px;
			left: -80px;
		}
	}
}

.moon {
	z-index:2;
	position:absolute;
	height:50px;
	width:50px;
	background:#FFFFFF;
	border-radius:50%;
	overflow:hidden;
	animation: orbit 14s linear infinite; 	
		
	.x {
		position:absolute;
		background:#DEDEDC;
		border-radius: 50%;
		
		&.one{
			width:10px;
			height:10px;
			top: 10px;
			left:2px
		}
		&.two{
			width:20px;
			height:20px;
			top: 20px;
  		left: 20px;
		}
		&.three{
			width:5px;
			height:5px;
			left:25px;
			top:2px;
		}
	}	
}

.earth {
	height:200px;
	width:200px;
	background:#42A6DA;
	border-radius:50%;
	overflow:hidden;
	position: relative;
	z-index:1;
	animation: shake 4.82s cubic-bezier(.36,.07,.19,.97) infinite;
	
	&::before{
		content: '';
		display: inline-block;
		width: 200px;
		height: 200px;
		position: relative;
		top: -82px;
		left: -60px;
		border-radius: 50%;
		background-color: #449ac7;
	}	
	
	&::after{
		content: '';
		display: inline-block;
		width: 310px;
		height: 180px;
		transform: rotate(-27deg);
		position: relative;
		top: -82px;
		left: 60px;
		border-radius: 50%;
		background-color: #2d7ea8;
	}	
}

.country {
	.us-south {
		width:90px;
		height:90px;
		background:#7CDC6C;
		clip-path: polygon(29% 39%, 24% 20%, 39% 8%, 55% 12%, 74% 20%, 93% 26%, 76% 65%, 69% 81%, 56% 100%, 49% 87%, 41% 72%, 42% 52%);
		position:absolute;
		top:90px;
		z-index:2
	}
	
	.us-north {
		width:90px;
		height:90px;
		background:#69CB59;
		clip-path: polygon(0 0, 83% 20%, 64% 44%, 75% 55%, 83% 43%, 99% 53%, 93% 73%, 56% 81%, 66% 100%, 53% 100%, 15% 85%, 0% 85%);
		position:absolute;
		top:4px;
		left:-23px;
		z-index:2
	}
	
	.us-north-1 {
		width: 40px;
  	height: 40px;
  	background: #69CB59;
  	clip-path: polygon(3% 41%, 14% 29%, 29% 18%, 44% 19%, 57% 31%, 65% 49%, 60% 81%, 49% 88%, 35% 100%, 26% 100%, 15% 85%, 15% 50%);
  	position: absolute;
  	top: 4px;
  	left: 56px;
  	z-index: 2;
	}
	
	.africa {
		width: 60px;
  	height: 60px;
  	background: #7CDC6C;
  	clip-path: polygon(5% 42%, 14% 26%, 39% 17%, 59% 23%, 69% 41%, 76% 50%, 64% 65%, 49% 88%, 40% 95%, 30% 89%, 26% 74%, 26% 50%);
  	position: absolute;
		top: 83px;
  	left: 94px;
  	z-index: 2;
	}
	
	.europe {
		width: 100px;
		height: 100px;
		background: #7CDC6C;
		clip-path: polygon(4% 43%, 13% 22%, 41% 18%, 65% 7%, 75% 14%, 98% 13%, 99% 35%, 92% 64%, 80% 82%, 50% 83%, 32% 67%, 21% 53%);
		position: absolute;
		top: 23px;
		left: 104px;
		z-index: 2;
	}
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes orbit {
	from { transform: rotate(0deg) translateX(190px) }
	to   { transform: rotate(360deg) translateX(190px) }
}

@keyframes orbit {
	from { transform: rotate(0deg) translateX(190px) }
	to   { transform: rotate(360deg) translateX(190px) }
}
</style>
